<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
// 评分
const value1 = ref('');
const value2 = ref('');
// 滑动盒子
const boxes = [
    { id: 1, color: '#ff8c8c', name: '精选推荐', name1: '送花HOT' },
    { id: 2, color: '#ff993e', name: '花语大全', name1: '花语寄情', path: '/language'},
    { id: 3, color: '#50b2fc', name: '文章资讯', name1: '鲜花资讯', path: '/article' },
    { id: 4, color: '#d389f6', name: '问答哈哈', name1: '你问我答' }
]
// 跳转不同页面
const goPage = (e) => {
    router.push(e)
    console.log(e);
}
</script>
<template>
    <div class="friends">
        <!-- 头部 -->
        <van-nav-bar title="Flower Buy" />
        <div class="container">
            <div class="box" ref="box"></div>
        </div>
        <!-- 盒子滑动 -->
        <div class="container" >
            <div class="scroll-container">
                <div class="one" @click="goPage(box.path)" v-for="box in boxes" :key="box.id"
                    :style="{ backgroundColor: box.color }">
                    <div class="color">{{ box.name }}</div>
                    <div class="color1">{{ box.name1 }}</div>
                </div>

            </div>
        </div>
        <!-- 瀑布流 -->
        <div class="waterfallflow">
            <div class="top">花友圈</div>
            <div class="bottom">
                <div class="left">
                    <div class="bottom-left" v-for="item in 6">
                        <img src="/public/flower01.png" alt="">
                        <div class="all">
                            <div class="one">世界上最好看的人在我眼睛里...</div>
                            <div class="two">
                                <div>
                                    <img src="/public/flower-tx.png" alt="">
                                    <div style="color: #000;"> Patricia</div>
                                </div>
                                <div>
                                        <van-rate v-model="value1" icon="like" void-icon="like-o" :count="1" />
                                    264
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="bottom-left" v-for="item in 5">
                        <img src="/public/flower04.png" alt="">
                        <div class="all">
                            <div class="one">是很不错的创造惊喜渠道，最最重要的是有东西有...</div>
                            <div class="two">
                                <div>
                                    <img src="/public/flower-tx.png" alt="">
                                    <div style="color: #000;"> Maria Martinez</div>
                                </div>
                                <div>
                                    <van-rate v-model="value2" icon="like" void-icon="like-o" :count="1" />
                                    264
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 盒子 -->
        <div style="height: 200px;"></div>
    </div>
</template>

<style lang="scss">
.friends {

    /*导航 */
    .van-nav-bar__title {
        margin-left: 10px;
        font-size: 1rem;
    }

    /*盒子滑动 */
    .container {
        width: 100%;
        overflow-x: auto;
        /* Enable horizontal scrolling */
        .scroll-container {
            display: flex;
            width: max-content;
            .one {
                width: 100px;
                border-radius: 10px;
                /* Set a fixed width for each box */
                height: 70px;
                margin: 5px;

                .color {

                    color: #fff;
                    margin: auto;
                    margin-top: 10px;
                    text-align: left;
                    width: 70%;
                    font-size: 16px;
                }

                .color1 {
                    color: #f7f7f7;
                    margin: auto;
                    margin-top: 5px;
                    text-align: left;
                    width: 70%;
                    font-size: 14px;
                }
            }
        }
    }

    /*瀑布流 */
    .waterfallflow {
        width: 96%;
        margin: auto;
        margin-top: 20px;
        box-sizing: border-box;

        .top {
            font-size: 17px;
            font-weight: bold;
            text-align: left;
        }

        .bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .left {
                width: 48%;

                .bottom-left {
                    width: 100%;
                    margin-top: 10px;
                    overflow: hidden;
                    box-shadow: 1px 3px #afafaf;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;

                    img {
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        width: 100%;
                    }

                    .all {
                        padding: 5px;
                        background-color: #fff;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;

                        .one {
                            font-size: 14px;
                            text-align: left;
                        }

                        .two {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 5px;
                            margin-bottom: 10px;

                            div:nth-child(1) {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: #000;

                                img {
                                    margin-right: 5px;
                                    width: 20px;
                                    height: 20px;
                                }
                            }

                            div:nth-child(2) {
                                display: flex;
                                align-items: center;
                                font-size: 14px;
                                color: #e6e6e6;

                            }
                        }
                    }
                }
            }

            .right {
                width: 48%;

                .bottom-left {
                    width: 100%;
                    margin-top: 10px;
                    overflow: hidden;
                    box-shadow: 1px 3px #afafaf;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;

                    img {
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        width: 100%;
                    }

                    .all {
                        padding: 5px;
                        background-color: #fff;
                        box-shadow: 2px 2px #ededed;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;

                        .one {
                            font-size: 14px;
                            text-align: left;
                        }

                        .two {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 5px;
                            margin-bottom: 10px;

                            div:nth-child(1) {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: #000;

                                img {
                                    margin-right: 5px;
                                    width: 20px;
                                    height: 20px;
                                }
                            }

                            div:nth-child(2) {
                                display: flex;
                                align-items: center;
                                font-size: 14px;
                                color: #e6e6e6;

                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
